<template>
  <path
    stroke="#000000"
    :style="{
      'stroke-width': 1,
      fill: '#ffffff',
    }"
    :d="d"
  />
</template>
<script setup lang="ts">
import { computed } from "vue";
import { Point } from "/@/components/types";

const props = defineProps<{
  points: Point[];
}>();

const arrowTailHeightRatio = 0.4;
const dottedRatio1 = 12 / 110;
const dottedRatio2 = 15 / 110;
const dottedRatio3 = 17 / 110;
const arrowTailWidthRatio = 0.4;

/**
dottedRatio1 1 dottedRatio2 1 dottedRatio3 2 arrowTail arrow
 */
const d = computed(() => {
  const points = props.points;
  const height = points[6].y - points[0].y;
  const width = points[2].x - points[0].x;

  const dotted1_p1 = { x: points[7].x, y: points[7].y - (height * arrowTailHeightRatio) / 2 };
  const dotted1_p2 = { x: points[7].x + width * dottedRatio1, y: dotted1_p1.y };
  const dotted1_p3 = { x: dotted1_p2.x, y: dotted1_p1.y + height * arrowTailHeightRatio };
  const dotted1_p4 = { x: dotted1_p1.x, y: dotted1_p3.y };
  const path1 = getPath([dotted1_p1, dotted1_p2, dotted1_p3, dotted1_p4]);

  const dotted2_p1 = { x: Math.round(dotted1_p2.x + 2), y: dotted1_p1.y };
  const dotted2_p2 = { x: dotted2_p1.x + width * dottedRatio2, y: dotted2_p1.y };
  const dotted2_p3 = { x: dotted2_p2.x, y: dotted2_p1.y + height * arrowTailHeightRatio };
  const dotted2_p4 = { x: dotted2_p1.x, y: dotted2_p3.y };
  const path2 = getPath([dotted2_p1, dotted2_p2, dotted2_p3, dotted2_p4]);

  const dotted3_p1 = { x: Math.round(dotted2_p2.x + 2), y: dotted1_p1.y };
  const dotted3_p2 = { x: dotted3_p1.x + width * dottedRatio3, y: dotted3_p1.y };
  const dotted3_p3 = { x: dotted3_p2.x, y: dotted3_p1.y + height * arrowTailHeightRatio };
  const dotted3_p4 = { x: dotted3_p1.x, y: dotted3_p3.y };
  const path3 = getPath([dotted3_p1, dotted3_p2, dotted3_p3, dotted3_p4]);

  const mainWidth = width - width * (dottedRatio1 + dottedRatio2 + dottedRatio3) - 1 - 1 - 2;
  const main_p1 = { x: Math.round(dotted3_p2.x + 3), y: dotted1_p1.y };
  const main_p2 = { x: main_p1.x + mainWidth * arrowTailWidthRatio, y: main_p1.y };
  const main_p3 = { x: main_p2.x, y: points[0].y };
  const main_p4 = { x: points[3].x, y: points[3].y };
  const main_p5 = { x: main_p3.x, y: points[4].y };
  const main_p6 = { x: main_p3.x, y: dotted1_p3.y };
  const main_p7 = { x: main_p1.x, y: dotted1_p3.y };
  const pathMain = getPath([main_p1, main_p2, main_p3, main_p4, main_p5, main_p6, main_p7]);

  return [path1, path2, path3, pathMain].join(" ");
});
function getPath(points: Point[]) {
  const arr: string[] = [];
  points.forEach((el) => {
    arr.push(`${el.x} ${el.y}`);
  });
  return `M${arr.join("L")}Z`;
}
</script>
